<template>
  <div>
    <div class="div-top">
      <el-form
        ref="settingForm"
        :model="settingForm"
        :rules="rules"
        label-width="150px"
      >
        <div class="div-left">
          <el-form-item label="允许抹零" />
          <el-form-item label="抹零金额" />
          <el-form-item label="允许修改实价" />
          <el-form-item label="负库存销售控制" />
          <el-form-item label="根据医保标识支付" />
          <el-form-item label="在线支付退款到账户" />
        </div>
        <div class="line" />
        <div class="div-right">
          <el-form-item label="" prop="wipe" class="not-style-item">
            <el-radio-group id="first-radio" v-model="settingForm.wipe" class="div-radio" @change="changeWipe">
              <el-radio :label="0">允许</el-radio>
              <el-radio :label="1">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="wipLimit" class="not-style-item">
            <el-radio-group v-model="settingForm.wipLimit" class="div-radio">
              <el-radio :label="1" :disabled="wipLimitDisable">抹角</el-radio>
              <el-radio :label="0.1" :disabled="wipLimitDisable">抹分</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="modifyPrice" class="not-style-item">
            <el-radio-group v-model="settingForm.modifyPrice" class="div-radio">
              <el-radio label="Y">允许</el-radio>
              <el-radio label="N">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="saleUnderStock" class="not-style-item">
            <el-radio-group v-model="settingForm.saleUnderStock" class="div-radio" style="width: 500px">
              <el-radio :label="3">全部禁止</el-radio>
              <el-radio :label="2">全部允许</el-radio>
              <el-radio :label="1">只允许中药饮片</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="checkMedAmt" class="not-style-item">
            <el-radio-group v-model="settingForm.checkMedAmt" class="div-radio">
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="onLinePayAutoRefund" class="not-style-item">
            <el-radio-group v-model="settingForm.onLinePayAutoRefund" class="div-radio">
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="div-bottom">
      <el-button type="primary" class="fl" style="margin-left: 50px;" @click="saveSetting('settingForm')">保存</el-button>
      <el-button type="primary" class="fl" @click="restSettingToModel('settingForm')">重置为默认值</el-button>
    </div>
  </div>
</template>

<script>
import { getSetting, saveSetting, getModelSetting } from '@/api/setting'
export default {
  name: 'FunctionPer',
  data() {
    return {
      wipLimitDisable: false,
      settingForm: {
        wipe: '',
        wipLimit: '',
        modifyPrice: '',
        saleUnderStock: '',
        checkMedAmt: '',
        onLinePayAutoRefund: ''
      },
      rules: {
        wipe: [
          { required: true, message: '请选择是否允许抹零', trigger: 'change' }
        ],
        wipLimit: [
          { required: true, message: '请选择一个抹零金额', trigger: 'change' }
        ],
        modifyPrice: [
          { required: true, message: '请选择是否允许修改实价', trigger: 'change' }
        ],
        saleUnderStock: [
          { required: true, message: '请选择是否允许负库存销售控制', trigger: 'change' }
        ],
        checkMedAmt: [
          { required: true, message: '请选择是否允许根据医保标识支付', trigger: 'change' }
        ],
        onLinePayAutoRefund: [
          { required: true, message: '请选择是否允许在线支付退款到账户', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    changeWipe() {
      if (this.settingForm.wipe === 0) {
        this.wipLimitDisable = false
        if (this.settingForm.wipLimit === '') {
          this.settingForm.wipLimit = 0.1
        }
      } else {
        this.wipLimitDisable = true
      }
    },
    getSetting() {
      getSetting({}).then(res => {
        this.settingForm = res.data
        this.changeWipe()
      })
        .finally(() => {
          this.loading = false
        })
    },
    getModelSetting(formName) {
      getModelSetting({}).then(res => {
        this.settingForm = res.data
        this.changeWipe()
        if (res.code === '40001') {
          this.saveSetting(formName)
        }
      })
        .finally(() => {
          this.loading = false
        })
    },
    restSettingToModel(formName) {
      this.getModelSetting(formName)
    },
    saveSetting(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveSetting({ ...this.settingForm }).then(res => {
            if (res.code === '40001') {
              this.$message({
                type: 'success',
                message: res.message,
                showClose: true
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                showClose: true
              })
            }
          })
            .finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .div-top{
    float: top;
  }
  /* 竖线 */
  .line{
    float: left;
    width: 2px;
    height: 370px;
    margin-top: 40px;
    background:#9aaabf;
  }
  .div-left{
    float:left;
    width: 300px;
  }
  .div-right{
    float:right;
    width: 300px;
    margin-top: -30px;
  }
  .el-form-item{
    margin-top: 30px;
    margin-left: 110px;
  }
  .not-style-item{
    width: 400px;
    height: 10px;
    margin-left: -100px;
    margin-top: 60px;
  }
  /*.div-radio{*/
  /*  width: 150px;*/
  /*  margin-top: 54px;*/
  /*}*/
  /*#first-radio{*/
  /*  width: 150px;*/
  /*  margin-top: 40px;*/
  /*}*/
  .div-bottom{
    float: bottom;
    width: 500px;
  }
  .fl{
    float: left;
    width: 150px;
    margin: 10px;
    margin-top: 20px;
  }
</style>
